<template>
    <view class="serial">
        <view class="header">输入插座编号</view>
        <vcode-input ref="VcodeInput" @vcodeInput="vcodeInput"></vcode-input>
        <button type="primary">确认</button>
    </view>
</template>

<script>
import VcodeInput from '../../../components/vcode-input/vcode-input.vue';
export default {
    data() {
        return {};
    },
    components: {
        VcodeInput
    },
    methods: {
        // 用户输入的值
        vcodeInput(val) {
            console.log(val);
        },
        // 控制组件获取焦点
        setFocus() {
            this.$refs.VcodeInput.setFocus();
        },
        // 控制组件失去焦点
        setBlur() {
            this.$refs.VcodeInput.setBlur();
        },
        // 清除已输入
        clearValue() {
            this.$refs.VcodeInput.clearValue();
        }
    }
};
</script>

<style lang="scss" scoped>
.serial {
    padding: 0 30rpx;
    .header {
        text-align: center;
        margin-top: 200rpx;
        margin-bottom: 60rpx;
    }
    .input-msg {
        display: flex;
        justify-content: space-between;
    }
    button {
        width: 510rpx;
        font-size: 36rpx;
        color: #ffffff;
        background-color: #ff6208;
        border-radius: 48rpx;
    }
}
</style>
